<!--
 * @Author: yuqy
 * @Date: 2023-04-10 19:26:39
 * @LastEditors: yuqy
 * @LastEditTime: 2023-11-02 11:27:52
 * @Descripttion: -
-->
<template>
  <div class="login_wrap" :class="{'loginContainer_web':nowSystem =='web', 'loginContainer_mid': VUE_APP_TYPE == 'MID'}">
      <h2>当前系统:{{ nowSystem }}</h2>
      <h2>当前中性版本: {{ VUE_APP_TYPE }}</h2>
      <h2>当前版本类型: {{ VITE_APP_BASE_URL }} </h2> 
      <h2>当前版本号: {{ APP_VERSON }}</h2>
      {{ listData }}
      {{ eleIsMove }}
      <v-btn color='red' @click="addList">新增</v-btn>
      <br />
      <v-btn color='red' @click="testDebounce">测试防抖</v-btn>
      <br />
      <v-btn color='red' @click="testThrottle">测试节流</v-btn>
      <div class="move_wrap" id="move_list_wrap">
        <ul class="list_wrap placeholder_wrap" >
            <li style="opacity: 0;" v-for="(item,index) in listData" :key="index + 1000" /> 
        </ul>
        <ul class="list_wrap list_move_wrap" >
            <li v-for="(item,index) in listData" :key="index" @click.stop="delListTest">
                <h2>{{ item }}</h2>
                <!-- <span @mousedown.stop='delList(item)' @ontouchstart.stop='delList(item)'>删除</span> -->
            </li>
        </ul>
      </div>
  </div>
</template>
<script >
import { getAction } from "@/api";
import { ref, onMounted, onUnmounted, nextTick } from "vue";
import { getCurrentInstance } from "@vue/runtime-core";
import { MoveFn }  from '@/libs/move.js'
import _ from 'lodash';
// import { setTimeout } from 'timers';

let listData = [1, 2, 3, 4];
export default {
  setup(){
    const _self = ref();
    const count = ref(0)

    /**
     * @name: 
     * @msg: 
     * @return {*}
     */    
    onMounted(() => {
      
    });
    /**
     * @name: 
     * @msg: 
     * @return {*}
     */    
    onUnmounted(() => {
      console.log('我走了额啊');
    });
    return { }
  },
  data() {
    return {
      isWeb: '',
      listData,
      eleIsMove: false,
      moveEl: null // 被拖动的实例化对象
    }
  },

  async mounted() {
    await this.$nextTick();
    this.initList();
    window.onresize = _.debounce(async () => {
      this.moveEl && this.moveEl.refreshList();
    }, 1000)
  },
  methods: {
    /**
     * @name:新增拖动中的元素 
     * @msg: 
     * @return {*}
     */    
    async addList () {
      let lengths = this.listData.length + 1;
      listData.push(lengths);
      this.listData = JSON.parse(JSON.stringify(listData));
      await this.$nextTick();
      this.moveEl && this.moveEl.init();
    },
    async initList () {
      let el = 'move_list_wrap';
      // 移动成功回调
      let callBack = (start, end) => {
        let startVal = listData[start];
        let endVal = listData[end];
        listData[start] = endVal;
        listData[end] = startVal;
      }
      let moveStart = () => {
        console.log('拖动开始了');
      }
      let moveEnd = () => {
        console.log('拖动结束了');
      }
      // 实例化拖动事件
      this.moveEl = new MoveFn({ name: '测试拖动', el, callBack, moveStart, moveEnd });
      await this.$nextTick();
      this.moveEl.init();
    },
    /**
     * @name: 删除拖动的元素
     * @msg: 
     * @param {*} val
     * @return {*}
     */    
    async delList (val) {
      // 移动中禁止删除，防止误触发删除
      if (this.moveEl && this.moveEl.isMoving) return;
      listData = listData.filter(s => s != val);
      this.listData = JSON.parse(JSON.stringify(listData));
      await this.$nextTick();
      this.moveEl && this.moveEl.init();
    },
    // 防抖函数
    testDebounce:_.debounce(() => {
      console.log('我是防抖');
    }, 3000),
    // 节流函数
    testThrottle:_.throttle(() => {
      console.log('我是节流函数');
    }, 1000),
    delListTest: () => {
      // alert('000')
    }
  }
}
</script>
<style scoped lang="less">

:deep(.v-btn--size-default) {
  font-size: 16px;
}


.login_wrap {
  background: #333;
  height: 100vh;
  font-size: 24px;
  color: #fff;
  h2 {
    text-align: left;
    padding: 10px 20px;
  }
}

.move_wrap {
  border: 10px solid #fff;
  position: relative;
  padding-top: 0;
}
.placeholder_wrap {
  overflow: hidden;
}
.list_wrap {
  background: blue;
  position: relative;
  z-index: 9;
}
.list_wrap> li {
  width: 300px;
  height: 200px;
  border: 10px solid red;
  float: left;
  margin:0 10px 10px 0;
}

.list_move_wrap {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 99;
  li {
    background: #333;
    &.active {
      border-color: green;
    }
    &.moveActive {
      border-color: yellow;
    }
    span {
      cursor: pointer;
    }
  }
}

</style>
